<template>
  <div class="fullscreen">
    <van-nav-bar left-text="返回" left-arrow @click-left="backFullscreen" />
    <div class="topBox">
      <div class="songInfo">
        <div
          class="van-ellipsis songName"
          v-text="PlayingSongDetail.SongName"
        ></div>
        <p
          class="singerName singerName"
          v-text="PlayingSongDetail.SingerName"
        ></p>
      </div>
      <div class="song-image-box" @click="switchFlag">
        <div class="songImg">
          <transition name="img">
            <img v-show="showFlag" v-lazy="PlayingSongDetail.picUrl" alt />
          </transition>
          <transition name="img">
            <div v-show="!showFlag" class="lyric">
              <div
                :class="[targetLyricIndex == index ? 'lyric-action' : '']"
                v-for="(item, index) in PlayingSongDetail.lyric"
                :key="item.second"
              >
                {{ item.lyric }}
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
    <div class="buttomBox">
      <!-- 喜欢，评论，收藏 -->
      <div class="icon-box-container">
        <div class="icon-box">
          <div @click="like(PlayingSongDetail.songId)">
            <van-icon name="like" />
          </div>
          <div class="chat" @click="getComment(PlayingSongDetail.songId)">
            <van-icon name="chat" />
          </div>
          <div>
            <van-icon name="star" />
          </div>
        </div>
      </div>
      <!-- 进度条盒子 -->
      <div class="sizeBox">
        <div class="time">
          <span v-text="progressBar.currentTime"></span>
        </div>
        <!-- 进度条 -->
        <div id="outside" @click="setProgressBar">
          <div id="inside"></div>
        </div>
        <div class="time">
          <span v-text="progressBar.size"></span>
        </div>
      </div>
      <!-- 控制面板 -->
      <div class="controlPanel">
        <span
          class="glyphicon glyphicon-step-backward"
          @click="nextOrBefore('before')"
        ></span>
        <span
          class="glyphicon glyphicon-pause playBtn"
          @click="playMusic"
        ></span>
        <span
          class="glyphicon glyphicon-step-forward"
          @click="nextOrBefore('next')"
        ></span>
      </div>
    </div>
  </div>
</template>

<script>
// 引入 Jquery
import $ from "jquery";
export default {
  data: function () {
    return {
      // 是否全屏
      // fullscreenFlag: true,
      // 当前歌词的下标
      targetLyricIndex: 0,
      // 显示歌词还是封面
      showFlag: true,
      // 是否拖动歌词
      isdrawing: false,
    };
  },
  props: ["PlayingSongDetail", "progressBar", "fullscreenFlag"],
  methods: {
    // 点击全屏
    fullScreen() {
      // this.fullscreenFlag = false;
      // 设置控制栏变色
      // $("#head-control").css("background", "cornflowerblue");
    },

    // 退出全屏
    backFullscreen() {
      // this.fullscreenFlag = false;
      // // $("#head-control").css("background", "red");
      this.$emit("backFullscreen");
    },
    // 切换显示封面和歌词
    switchFlag() {
      this.showFlag = !this.showFlag;
    },
    playMusic() {
      this.$emit("playMusic");
    },
    // 更新进度条
    setProgressBar() {
      // 获取鼠标位置
      let length = event.clientX - outside.offsetLeft;
      // 计算currentTime
      let audio = document.getElementById("audio");
      audio.currentTime =
        (length / this.progressBar.outside_width) * this.PlayingSongDetail.size;
    },
    nextOrBefore(flag) {
      this.$emit("nextOrBefore", flag);
    },
    //跳转到评论模块
    getComment(id) {
      this.$emit("backFullscreen");
      this.$router.push("/comment/" + id);
    },
    // 拖动歌词
    dragLyric(e) {
      console.log(e);
      let height = $(".lyric-action").position().top;
      // 获取当前的translateY
      let translate = $(".lyric").css("transform")
      let ty = parseFloat(/\((.*?)\)/.exec(translate)[1].split(',')[5])
      console.log(ty)
      let clientY = e.detail.deltaY+ty
      console.log(ty,clientY)
      $(".lyric").css("transform", `translateY(${clientY}px)`);
    },
  },
  watch: {
    // 监听歌词变化
    "PlayingSongDetail.currentTime": function (newValue) {
      if (this.PlayingSongDetail.lyric.length <= 2) {
        return;
      }
      this.PlayingSongDetail.lyric.forEach((item, index) => {
        // 判断是否到达歌词的时间
        if (item.second < newValue) {
          this.targetLyricIndex = index;
          return;
        }
      });
      // console.log(this.targetLyricIndex);
    },
    targetLyricIndex: function (newValue) {
      // 获取激活行的高度
      let height = $(".lyric-action").position().top;
      // console.log(height)
      // 更换歌词下标后，向上移动一行
      $(".lyric").css("margin-top", "0px");
      $(".lyric").css("transform", `translateY(-${height}px)`);
    },
  },
};
</script>

<style lang="scss">
// 设置横竖屏显示不同的样式
// 竖屏
@media screen and (orientation: portrait) {
  .fullscreen {
    flex-direction: column;
  }
  .buttomBox {
    height: 30vh;
  }
}
// 横屏
@media screen and (orientation: landscape) {
  .buttomBox {
    height: 100vh;
  }
}
.fullscreen {
  // padding-top: 20px;
  height: 100%;
  width: 100%;
  position: fixed;
  display: flex;
  // flex-direction: column;
  // justify-content: start;
  bottom: 0;
  z-index: 200;
  background: cornflowerblue;
  .van-nav-bar__content {
    background: cornflowerblue !important;
  }
  .van-nav-bar__left {
    span,
    .van-icon {
      color: white;
    }
  }
  .songInfo {
    // flex: 1;s
    margin-left: 50px;
    margin-top: 50px;
    .songName {
      color: white;
      font-size: 22px;
    }
    .singerName {
      color: white;
      font-size: 14px;
    }
  }
  .song-image-box {
    overflow: hidden;
    display: flex;
    justify-content: center;
  }
  .songImg {
    // flex: 9;
    width: auto;
    height: 80vw;
    max-height: 60vh;
    // height: 100%;
    img {
      // width: 100%;
      height: 100%;
      // height: 100%;
      border-radius: 10px;
    }
  }
  // 歌词样式
  .lyric {
    padding: 0 10vw;
    transition: all 0.5s ease;
    // 歌词激活样式
    .lyric-action {
      font-size: 24px;
      color: #fff !important;
    }
  }
  .lyric div {
    margin: 0;
    padding: 0;
    height: auto;
    line-height: 42px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 18px;
    text-align: center;
  }

  .topBox {
    // flex:7;
    // height: 60%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
  }
  .buttomBox {
    // flex:3;
    width: 100%;
    // height: 30vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  // 点赞，评论，收藏按钮
  .icon-box-container {
    flex: 5;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .icon-box {
    width: 100%;
    // height: 40%;
    padding-top: 30px;
    display: flex;
    justify-content: center;
    div {
      height: 40px;
      width: 40px;
      background: #eee;
      border-radius: 20px;
      padding: 12px;
      i {
        font-size: 16px;
        text-align: center;
      }
    }
    .chat {
      margin: 0 35px;
    }
  }
  // 控制按钮
  .controlPanel {
    width: 100%;
    flex: 3;
    // height: 30%;
    display: flex;
    // margin-top: 20px;
    justify-content: center;
    color: #eee;
    font-size: 30px;
    span {
      margin: 0 15px;
    }
  }
  // 进度条盒子
  .sizeBox {
    // height: 30%;
    flex: 3;
    width: 100%;
    padding: 0;
    display: flex;
    margin-top: 20px;
    justify-content: center;
    .time {
      width: 10%;
      text-align: center;
      color: #eee;
    }
    // 进度条样式
    #outside {
      border-radius: 10px;
      width: 280px;
      height: 20px;
      background: rgb(192, 216, 236);
    }
    #inside {
      height: 20px;
      border-radius: 10px;
      width: 20px;
      background: rgba(255, 255, 255, 0.8);
    }
  }
}

// 切换动画
.img-enter,
.img-leave-to {
  opacity: 0;
}

.img-enter-active,
.img-leave-active {
  transition: all 0.5s ease;
}
</style>